<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="80px" class="el-form">
      <el-row type="flex" justify="space-between" :gutter="16">
        <el-col :span="12">
          <el-form-item label="申请城市:">
              <city-select v-model="citySelection" placeholder="请选择申请城市" ref="citySelect" :showAllLevels="false"
                @change="citySelectionChange"></city-select>
            </el-form-item>

        </el-col>
        <el-col :span="12">
          <div style="text-align: right;">
            <e-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</e-button>
            <e-button type="primary" icon="el-icon-search" size="mini" @click.stop="handleQuery">查询</e-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="card-wrap card-padding">
      <div class="table-title-wrap justify-end">
        <e-button type="primary"  size="mini" v-hasPermi="['pzzx:IndexManagement:export']"
          @click="handleExport">导出</e-button>
        <e-button type="primary"   size="mini" v-hasPermi="['pzzx:IndexManagement:add']"
          @click="handleNew">新增</e-button>
      </div>
      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" fixed="left" width="100">
            <template slot-scope="{row}">
              <el-button size="mini" type="text" @click="viewOpen(row, 'view')" v-hasPermi="['pzzx:IndexManagement:view']"
                v-if="row.workOrderStatus != 1">查看</el-button>

            </template>
          </el-table-column>
        </template>
        <template slot="tableCol">
          <el-table-column label="申请城市" prop="cityName" width="120" align="center" />
          <el-table-column label="总量" prop="indexTotal" min-width="100" align="center" />
          <el-table-column label="已使用数量" align="center">
            <el-table-column label="燃油" prop="usedFuelNum" align="center" />
            <el-table-column label="新能源" prop="usedNewEnergy" align="center" />

          </el-table-column>
          <el-table-column label="未使用数量" align="center">
            <el-table-column label="燃油" prop="fuelNum" align="center" />
            <el-table-column label="新能源" prop="newEnergyNum" align="center" />
          </el-table-column>
        </template>
      </table-page>

    </div>


  </div>
</template>

<script>

import {
  getDataList
} from "@/api/IndexManagement/IndexManagement.js";
import CitySelect from "../../components/citySelect.vue"


export default {

  name: "IndexManagementList",

  dicts: ['car_business_type', 'work_order_type', 'contract_type'],
  components: {

    CitySelect
  },
  computed: {

  },
  data() {
    return {
      citySelection:[],
      // props: {
      //   lazy: true, //	是否动态加载子节点，需与 lazyLoad 方法结合使用
      //   lazyLoad: this.handleGetClassOrStudent, //懒加载调用的方法
      // },

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cityName: "",

      },

      total: 0,
      dataList: [

      ],
    };
  },
  created() {
    this.getList();

  },
  methods: {
    citySelectionChange(val){
      if (val.length > 0) {
        const nodes = Array.from(val, item => ({
          value: item.value,
          label: item.label,
          pv: item.parent.value,
          pl: item.parent.label
        }))
        this.queryParams.cityName =nodes[0].label
        this.citySelection = [nodes[0].pv , nodes[0].value]

      } else {
        this.citySelection = val

        this.queryParams.cityName = ""
      }
    },


    handleNew() {
      this.$router.push({
        path: "/pzzx/IndexManagementApply",
        // query: {
        //   id: row.id,

        // }
      })
    },

    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      getDataList(this.queryParams).then(res => {
        if (res.code == "200") {
          const {
            rows,
            total
          } = res
          this.dataList = rows
          this.total = total
          this.loading = false;
        }
      });
    },



    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.cityName = ""
      this.citySelection =[]
      this.resetForm("queryForm");
      this.handleQuery();
    },

    viewOpen(row, type) {
      this.$router.push({
        path: "/pzzx/viewIndexManagement",
        query: {
          cityName: row.cityName,

        }
      })

    },


    /** 导出按钮操作 */
    handleExport() {
      this.download('car/carIndex/export', {
        ...this.queryParams
      }, `指标管理_${new Date().getTime()}.xlsx`)
    },

  }
};
</script>
<style lang="scss" scoped>
.el-form {
  padding: 18px 20px;
  padding-bottom: 8px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-form-item__label {
    font-size: 14px;
    font-family: 400;
  }
}
</style>
